<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/product_overview.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- start header -->
		<header>
			<div class="top center">
				<div class="left fl">

				</div>
				<div class="right fr">
					<div class="gouwuche fr">
						<a href="./dingdanzhongxin.html">我的订单</a>
					</div>
					<div class="fr">
						<ul>
							<li>
								<a href="./login.html" target="_blank">登录</a>
							</li>
							<li>|</li>
							<li>
								<a href="./register.html" target="_blank">注册</a>
							</li>
							<li>|</li>
							<li>
								<a href="#top">个人中心</a>
							</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</header>
		<!--end header -->
		<!-- start banner_x -->
		<div id="banner_x">
			<div class="banner_x center">
				<a href="./index.html" target="_blank">
					<div class="logo fl"></div>
				</a>
				<div class="nav fl">
					<ul>
						<li>
							<a href="">道恩仪器</a>
						</li>
						<li>
							<a href="">道恩</a>
						</li>
						<li>
							<a href="">显微镜</a>
						</li>
						<li>
							<a href="">道恩仪器</a>
						</li>
						<li>
							<a href="">道恩</a>
						</li>
						<li>
							<a href="">显微镜</a>
						</li>
						<li>
							<a href="">道恩仪器</a>
						</li>
						<li>
							<a href="">道恩</a>
						</li>

					</ul>
				</div>
				<div class="search fr">
					<form action="" method="post">
						<div class="text fl">
							<input type="text" class="shuru" placeholder="小米6&nbsp;小米MIX现货">
						</div>
						<div class="submit fl">
							<img src="image/fang.png" />
						</div>
						<div class="clear"></div>
					</form>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<!-- end banner_x -->
		<div class="line"></div>
		<div class="chanpin">
			<div class="chanpin_left">
				显微镜
			</div>
			<div class="chanpin_right">
				<div class="p">
					<ul class="tab">
						<li class="cur">概述</li>
						<div class="shu"></div>
						<li>参数</li>
						<div class="shu"></div>
						<li>用户评价</li>
					</ul>
				</div>
				<div class="buy">立即购买</div>
			</div>
		</div>
		<!--cont1-->
		<div class="cont contt">
			<!--轮播-->
			<div id="banner">
				<ul>
					<li class="on1">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
				<div id="banner_list">
					<a href="#" target="_blank"><img src="image/product1.png" /></a>
					<a href="#" target="_blank"><img src="image/product2.png" /></a>
					<a href="#" target="_blank"><img src="image/product3.png" /></a>
					<a href="#" target="_blank"><img src="image/product4.png" /></a>
				</div>
			</div>
			<!--中间的-->
			<div class="product1"><img src="image/product3.png" /></div>
			<div class="product2"><img src="image/product4.png" /></div>
			<div class="product3"><img src="image/product5.png" /></div>
		</div>
		<!--cont2-->
		<div class="cont">
			<div class="main">
				<div class="pic">
					<img src="image/product6.png" />
				</div>
				<div class="youshi">
					<ul>
						<li>
							<h4>全面屏 2.0</h4>
							<p>5.99" 大屏 18:9 屏幕比例</p>
						</li>
						<li>
							<h4>Unibody 全陶瓷</h4>
							<p>另有黑色陶瓷版可选</p>
						</li>
						<li>
							<h4>骁龙835</h4>
							<p>高通年度旗舰处理器</p>
						</li>
						<li>
							<h4>8GB 大内存</h4>
							<p>另有 6GB 黑色陶瓷版可选</p>
						</li>
						<li>
							<h4>4 轴光学防抖</h4>
							<p>1.25μm 大像素相机</p>
						</li>
						<li>
							<h4>双 ADC 高清录音</h4>
							<p>远处声音也清晰</p>
						</li>
					</ul>
				</div>
				<div class="xian1"></div>
				<div class="mixhei">
					<h4>小米MIX 2 黑色陶瓷版</h4>
					<div class="heil">
						<p>5.99英寸 全面屏</p>
						<p>骁龙835 最高主频 2.45GHz</p>
						<p>Adreno 540 图形处理器</p>
						<p>6GB LPDDR4x 双通道大内存</p>
						<p>64GB/128GB/256GB 机身存储</p>
						<p>闪存存储标准 UFS 2.1</p>
					</div>
					<div class="heir">
						<p>外观：四曲面陶瓷</p>
						<p>高度：151.8 mm</p>
						<p>宽度：75.5 mm</p>
						<p>厚度：7.7 mm</p>
						<p>重量：185 g</p>
					</div>
				</div>
				<div class="mixtao">
					<h4>小米MIX 2 全陶瓷尊享版</h4>
					<div class="quanl">
						<p>5.99英寸 全面屏</p>
						<p>骁龙835 最高主频 2.45GHz</p>
						<p>Adreno 540 图形处理器</p>
						<p>6GB LPDDR4x 双通道大内存</p>
						<p>64GB/128GB/256GB 机身存储</p>
						<p>闪存存储标准 UFS 2.1</p>
					</div>
					<div class="quanr">
						<p>外观：Unibody全陶瓷</p>
						<p>高度：150.5 mm</p>
						<p>宽度：74.6 mm</p>
						<p>厚度：7.7 mm</p>
						<p>重量：187 g</p>
					</div>
				</div>
				<p class="mainp">实际可用容量会由于诸多因素而减少并有所差异：由于操作系统运行占据了部分内存（RAM），实际可用空间小于标识内存容量；由于安装操作系统和预装的程序占据了部分闪存（ROM），实际可用存储空间 小于标识闪存容量。
				</p>
				<div class="left_l">
					<div class="left_l_p">
						<h4>网络频段及插卡说明</h4>
						<p>2G:GSM 2 / 3 / 5 / 8<br/>2G:CDMA BC0,BC1,BC6,BC10<br/> 3G:CDMA EVDO,BC0,BC1,BC6,BC10<br/> 3G:WCDMA 1 / 2 / 3 / 4 / 5 / 6 / 8 / 9 / 19<br/> 3G:TD-SCDMA 34 / 39<br/> 4G:TD-LTE 34 / 38 / 39 / 40 / 41<br/> 4G:FDD-LTE 1 / 2 / 3 / 4 / 5 / 7 / 8 / 12 / 13 / 17<br/> 18 / 19 / 20 / 25 / 26 / 27 / 28 / 29 / 30<br/> B41支持 2496-2690 全带宽<br/> LTE B41 4天线技术，可支持 4×4 MIMO</p><br/>
					</div>
				</div>
				<div class="left_r">
					<img src="image/product6.png" />
				</div>
			</div>
		</div>
		<!--cont3-->
		<div class="cont">
			<div class="mains">
				<div class="thinks">
					<p>大家认为</p>
					<ul>
						<li>全部(210)</li>
						<li>显示清晰(10)</li>
						<li>显示清晰(10)</li>
						<li>显示清晰(10)</li>
						<li>显示清晰(10)</li>
						<li>显示清晰(10)</li>
					</ul>
				</div>
				<div class="pingl">
					<img src="image/hotcity.png" />
					<p>热门评论</p>
				</div>
				<div class="pinglun">
					<ul>
						<li>
							<div class="head">
								<img src="image/head.png" />
							</div>
							<div class="pinglun_x">
								<h4 class="name">娜娜</h4>
								<p class="time">2017-10-12</p>
								<p class="pingjia">用河南哩话说就一个字“中”！两个字“带劲”三个字“嫩得啊”！机灵了，东西很好，客服妹子你看中不中</p>
								<div class="xiu">
									<img src="image/product6.png" />
									<img src="image/product6.png" />
									<img src="image/product6.png" />
								</div>
								<div class="dianz">
									<img src="image/good.png" />
									<p>134</p>
								</div>
								<div class="huifu">
									<input type="text" id="" value="" placeholder="回复楼主" /><button>回复</button>
								</div>
								<div class="chat">
									<div class="chat_show">
										<ol>
											<li>
												<img src="image/head.png" />
												<div class="chat_hui">
													<h5>麦芒</h5>
													<p>客服你长得真好看</p>
												</div>
											</li>
											<li>
												<img src="image/head.png" />
												<div class="chat_hui">
													<h5>麦芒</h5>
													<p>客服你长得真好看</p>
												</div>
											</li>
										</ol>
									</div>
								</div>
							</div>
							<div class="chat_more">
								查看全部
							</div>
						</li>
						<li>
							<div class="head">
								<img src="image/head.png" />
							</div>
							<div class="pinglun_x">
								<h4 class="name">娜娜</h4>
								<p class="time">2017-10-12</p>
								<p class="pingjia">用河南哩话说就一个字“中”！两个字“带劲”三个字“嫩得啊”！机灵了，东西很好，客服妹子你看中不中</p>
								<div class="xiu">
									<img src="image/product6.png" />
									<img src="image/product6.png" />
									<img src="image/product6.png" />
								</div>
								<div class="dianz">
									<img src="image/good.png" />
									<p>134</p>
								</div>
								<div class="huifu">
									<input type="text" id="" value="" placeholder="回复楼主" /><button>回复</button>
								</div>
								<div class="chat">
									<div class="chat_show">
										<ol>
											<li>
												<img src="image/head.png" />
												<div class="chat_hui">
													<h5>麦芒</h5>
													<p>客服你长得真好看</p>
												</div>
											</li>
											<li>
												<img src="image/head.png" />
												<div class="chat_hui">
													<h5>麦芒</h5>
													<p>客服你长得真好看</p>
												</div>
											</li>
										</ol>
									</div>
								</div>
							</div>
						</li>
						<li>
							<div class="head">
								<img src="image/head.png" />
							</div>
							<div class="pinglun_x">
								<h4 class="name">娜娜</h4>
								<p class="time">2017-10-12</p>
								<p class="pingjia">用河南哩话说就一个字“中”！两个字“带劲”三个字“嫩得啊”！机灵了，东西很好，客服妹子你看中不中</p>
								<div class="xiu">
									<img src="image/product6.png" />
									<img src="image/product6.png" />
									<img src="image/product6.png" />
								</div>
								<div class="dianz">
									<img src="image/good.png" />
									<p>134</p>
								</div>
								<div class="huifu">
									<input type="text" id="" value="" placeholder="回复楼主" /><button>回复</button>
								</div>
								<div class="chat">
									<div class="chat_show">
										<ol>
											<li>
												<img src="image/head.png" />
												<div class="chat_hui">
													<h5>麦芒</h5>
													<p>客服你长得真好看</p>
												</div>
											</li>
											<li>
												<img src="image/head.png" />
												<div class="chat_hui">
													<h5>麦芒</h5>
													<p>客服你长得真好看</p>
												</div>
											</li>
										</ol>
									</div>
								</div>
							</div>
						</li>
					</ul>
					<div class="more" style="background: #fff;margin-bottom: 40px;">
						加载更多
					</div>
				</div>
				<div class="manyidu">
					<div class="goumaiman">
						<p>54346851<span>人购买后满意</span></p>
						<div class="yuan">
							<img src="image/baifenbi.png" />
							<p>满意度89%</p>
						</div>
					</div>
					<p>最新评价</p>
					<div class="new_chat">
						<ul>
							<li>
								<p class="time2">8分钟前-505170956</p>
								<p class="new_xq">挺好的，显微镜成像清晰，挺好的显微镜成像清晰</p>
								<img src="image/good.png" />
							</li>
							<li>
								<p class="time2">8分钟前-505170956</p>
								<p class="new_xq">挺好的，显微镜成像清晰，挺好的显微镜成像清晰</p>
								<img src="image/good.png" />
							</li>
							<li>
								<p class="time2">8分钟前-505170956</p>
								<p class="new_xq">挺好的，显微镜成像清晰，挺好的显微镜成像清晰</p>
								<img src="image/good.png" />
							</li>
							<li>
								<p class="time2">8分钟前-505170956</p>
								<p class="new_xq">挺好的，显微镜成像清晰，挺好的显微镜成像清晰</p>
								<img src="image/good.png" />
							</li>
							<li>
								<p class="time2">8分钟前-505170956</p>
								<p class="new_xq">挺好的，显微镜成像清晰，挺好的显微镜成像清晰</p>
								<img src="image/good.png" />
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot-top">
				<ul>
					<li>
						<img src="image/add.png" />
						<a href="#">预约维修服务</a>
					</li>
					<li>
						<img src="image/seven.png" />
						<a href="#">7天无理由退货</a>
					</li>
					<li>
						<img src="image/five.png" />
						<a href="#">15天免费换货</a>
					</li>
					<li>
						<img src="image/you.png" />
						<a href="#">满150包邮</a>
					</li>
					<li>
						<img src="image/add.png" />
						<a href="#">520余家售后网点</a>
					</li>
				</ul>
			</div>
			<div class="foot-middle">
				<div class="middle-left">
					<div class="middle-list">
						<ul>
							<li class="list-head">帮助中心</li>
							<li>
								<a href="#">账户管理</a>
							</li>
							<li>
								<a href="#">购物指南</a>
							</li>
							<li>
								<a href="#">订单操作</a>
							</li>
						</ul>
					</div>
					<div class="middle-list">
						<ul>
							<li class="list-head">服务支持</li>
							<li>
								<a href="#">售后政策</a>
							</li>
							<li>
								<a href="#">自助服务</a>
							</li>
							<li>
								<a href="#">相关下载</a>
							</li>
						</ul>
					</div>
					<div class="middle-list">
						<ul>
							<li class="list-head">线下门店</li>
							<li>
								<a href="#">道恩之家</a>
							</li>
							<li>
								<a href="#">服务网点</a>
							</li>
							<li>
								<a href="#">零售网点</a>
							</li>
						</ul>
					</div>
					<div class="middle-list">
						<ul>
							<li class="list-head">关于道恩</li>
							<li>
								<a href="#">了解道恩</a>
							</li>
							<li>
								<a href="#">加入道恩</a>
							</li>
							<li>
								<a href="#">联系我们</a>
							</li>
						</ul>
					</div>
					<div class="middle-list">
						<ul>
							<li class="list-head">关注我们</li>
							<li>
								<a href="#">新浪微博</a>
							</li>
							<li>
								<a href="#">官方微信</a>
							</li>
						</ul>
					</div>
					<div class="middle-list">
						<ul>
							<li class="list-head">特色服务</li>
							<li>
								<a href="#">礼物码</a>
							</li>
							<li>
								<a href="#">防伪查询</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="middle-right">
					<div class="middle-text">
						<span class="number">400-100-5678</span><br />
						<span>周一至周日 8:00-18:00</span><br />
						<span>(仅收市话费)</span><br />
						<span class="customer"><a href="#">24小时在线客服</a></span>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="footer-0">
				<div class="footer-left">
					<div class="footer-img">
						<img src="image/logo_top.png" />
					</div>
					<div class="footer-p">
						<p>道恩商城|MIUI|米聊|多看书城|道恩路由器|视频电话|道恩天猫店|道恩淘宝直营店|道恩网盟|道恩移动|隐私政策|Select Region</p><br />
						<p>@mi.com 京ICP证110507号 京ICP备10046444号京公网安备11010802020134号 京网文[2014]0059-0009号</p><br />
						<p> 违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
					</div>
				</div>
				<div class="footer-right">
					<img src="IMDP/193ef991df6a9047ac6784e9550986c1.png" />
				</div>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".tab li").click(function() {
				$(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
				$(".cont").eq($(".tab li").index(this)).addClass("contt").siblings().removeClass('contt');
			});
		});

		var t = n = 0,
			count;
		$(document).ready(function() {
			count = $("#banner_list a").length;
			$("#banner_list a:not(:first-child)").hide();
			$("#banner_info").html($("#banner_list a:first-child").find("img").attr('alt'));
			$("#banner_info").click(function() {
				window.open($("#banner_list a:first-child").attr('href'), "_blank")
			});
			$("#banner li").click(function() {
				var i = $(this).text() - 1; //获取Li元素内的值，即1，2，3，4
				n = i;
				if(i >= count) return;
				$("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt'));
				$("#banner_info").unbind().click(function() {
					window.open($("#banner_list a").eq(i).attr('href'), "_blank")
				})
				$("#banner_list a").filter(":visible").fadeOut(200).parent().children().eq(i).fadeIn(200);
				document.getElementById("banner").style.background = "";
				$(this).toggleClass("on1");
				$(this).siblings().removeAttr("class");
			});
			t = setInterval("showAuto()", 2000);
			$("#banner").hover(function() {
				clearInterval(t)
			}, function() {
				t = setInterval("showAuto()", 2000);
			});
		})

		function showAuto() {
			n = n >= (count - 1) ? 0 : ++n;
			$("#banner li").eq(n).trigger('click');
		}
		$(".more").click(function() {
			console.log("123456");
			var lists = '<li><div class="head"><img src="image/head.png" /></div><div class="pinglun_x"><h4 class="name">娜娜</h4><p class="time">2017-10-12</p>' +
				'<p class="pingjia">用河南哩话说就一个字“中”！两个字“带劲”三个字“嫩得啊”！机灵了，东西很好，客服妹子你看中不中</p><div class="xiu"><img src="image/product6.png" />' +
				'<img src="image/product6.png" /><img src="image/product6.png" /></div><div class="dianz"><img src="image/good.png" /><p>134</p></div><div class="huifu"><input type="text" id="" value="" placeholder="回复楼主" />' +
				'<button>回复</button></div><div class="chat"><div class="chat_show"><ol><li><img src="image/head.png" /><div class="chat_hui"><h5>麦芒</h5><p>客服你长得真好看</p></div></li><li><img src="image/head.png" />' +
				'<div class="chat_hui"><h5>麦芒</h5><p>客服你长得真好看</p></div></li></ol></div></div></div></li>';
			$(".pinglun ul").append(lists);
		});
	</script>

</html>